<template>
  <div class="enter-peopleIntor">
    <div>
      <el-carousel height="500px" motion-blur v-if="pageSetValue.banner.length">
        <el-carousel-item v-for="(item,index) in pageSetValue.banner" :key="index">
          <el-image style="width: 100%; height: 100%" :src="item.url" fit="cover" />
          <div class="ql-editor" style="position: absolute;z-index: 100;" v-html="item.bannerText"
          :style="{left: item.pingyiweizhi == '左边' ? '5%' : item.pingyiweizhi == '中间' ? '50%' : '90%'},
{top: item.shuipingweizhi == '顶部' ? '40px' : item.shuipingweizhi == '居中' ? '50%' : '90%'}"></div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style="width: 100%;background: #fff;padding: 10px;" v-if="pageSetValue.peopleArr.length">
      <div style="width: 70%;margin: 0 auto;display: flex;flex-wrap: wrap;align-items: flex-start;
      padding: 10px 10px 0 10px;border-radius: 3px;
    background: linear-gradient(60deg, #FFFFFF 0%, rgba(142,196,241,0.4) 100%);" class="guanwang-bg">
        <div class="bg-people" v-for="(item,index) in pageSetValue.peopleArr" @click="toDetail(index)">
          <div style="width: 342px;height: 342px;overflow: hidden">
            <el-image :src="item.url" style="width: 100%;height: 100%" fit="cover" class="image-hover-scale-bg123"/>
          </div>
          <div style="margin-top: 8px;font-size: 18px;color: #333">{{item.peopleName}}</div>
          <div style="margin-top: 8px;font-size: 16px;color: #999">{{item.peopleJie}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {useRoute,useRouter} from 'vue-router'
  import { screenStore } from '~/stores/modules/screen'
  import gsap from 'gsap'
  const route = useRoute()
  const router = useRouter()
  const scrStore = screenStore()
  const pageSetValue = ref({})
  onMounted(() => {
    if(JSON.stringify(route.query) != '{}'){
      const {prentInd,name} = route.query
      const dataArr = scrStore.guanwangPage[prentInd * 1].tableData
      const ind = dataArr.findIndex(item => item.name == name)
      pageSetValue.value = dataArr[ind].pageJson
    }

    gsap.fromTo(".enter-peopleIntor", {
      opacity:0,
    },{
      opacity:1,
      duration: 2,
    });
  })

  function toDetail(index){
    router.push({path:'/userhome/companyIntro/peopleIntroDetail',query:{ind:index}})
  }
</script>

<style scoped lang="less">
  @import "quill/dist/quill.snow.css";
  /* 针对 Quill 生成的居中类添加样式 */
  .enter-peopleIntor .ql-editor ::v-deep .ql-align-center {
    text-align: center !important;
  }

  /* 确保图片在居中容器内正确显示 */
  .enter-peopleIntor .ql-editor ::v-deep .ql-align-center img {
    display: inline-block !important; /* 关键：避免图片默认块级元素导致的居中失效 */
    margin: 0 auto !important;
  }
.bg-people{
  width: 360px;
  height: 415px;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 2px 2px #f1eded;
  background: #fff;
  margin-right: 20px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.image-hover-scale-bg123{
  transition:all 0.7s;
  &:hover{
    transform: scale(1.2);
  }
}

</style>
